<template>
  <el-row style="min-height: 460px">
    <el-col :span="8" class="sea-card">
      <div class="box margin-right">
        <div class="box-body">
          <div style="text-align: center;" class="bg-primary margin-bottom padding-large">
            <div class="role-icon box-circle">
              <i class="fa fa-user-secret text-fatal" style="margin-left: 6px"></i>
            </div>
            <h5>管理员</h5>
          </div>
          <div>
          <span>
            管理员 （Administrator）拥有完整的系统权限，角色的权限自上而下派发，管理员是最顶级的账号。
          </span>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="16" class="sea-card">
      <div class="box">
        <div class="box-body">
          <el-tabs>
            <!--基础信息-->
            <el-tab-pane label="基础信息">
              <smart-form-group ref="form_modify" method="PUT" url="/sys/role/info"
                                :object="object" :model="form_data">
                <smart-form-layout require hidden name="id" label="ID">
                </smart-form-layout>
                <smart-form-layout require name="authorityCode" label="授权码">
                  <smart-text-view name="authorityCode" placeholder="授权码"></smart-text-view>
                  <small class="text-secondary">授权码会被代码直接使用，一般不允许修改！</small>
                </smart-form-layout>
                <smart-form-layout require name="roleName" label="角色名称">
                  <smart-text-view name="roleName" placeholder="角色名称"></smart-text-view>
                </smart-form-layout>
                <smart-form-layout require name="description" label="角色描述">
                  <smart-text-view type="textarea" name="description" placeholder="角色描述"></smart-text-view>
                </smart-form-layout>
              </smart-form-group>
            </el-tab-pane>

            <!--菜单权限-->
            <el-tab-pane label="菜单权限">
              <grant-menu :object="object"></grant-menu>
            </el-tab-pane>

            <!--操作权限-->
            <el-tab-pane label="操作权限">
              <grant-permit :object="object"></grant-permit>
            </el-tab-pane>
          </el-tabs>
          <!--tab end-->
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import GrantMenu from "./grant/menu.vue";
import GrantPermit from "./grant/permit.vue";

const props = defineProps({
    // 成功回调，通常是刷新数据表格
    object: {type: Object, default: undefined}
})

const form_data = [
    {
        name: 'id', label: 'ID', value: ''
        , rules: [
            {required: true, message: '[ID]字段不允许为空 ', trigger: 'blur'},
            {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
        ]
    },
    {
        name: 'orgId', label: '机构ID', value: ''
        , rules: [
            {required: true, message: '[机构ID]字段不允许为空 ', trigger: 'blur'},
            {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
        ]
    },
    {
        name: 'authorityCode', label: '授权码', value: ''
        , rules: [
            {required: true, message: '[授权码]字段不允许为空 ', trigger: 'blur'},
            {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
        ]
    },
    {
        name: 'roleName', label: '角色名称', value: ''
        , rules: [
            {required: true, message: '[角色名称]字段不允许为空 ', trigger: 'blur'},
            {min: 0, max: 64, message: '最多64字符', trigger: 'blur'}
        ]
    },
    {
        name: 'icon', label: '', value: ''
        , rules: [
            {required: true, message: '[]字段不允许为空 ', trigger: 'blur'},
            {min: 0, max: 255, message: '最多255字符', trigger: 'blur'}
        ]
    },
    {
        name: 'disabled', label: '是否可用', value: ''
    },
    {
        name: 'editable', label: '是否可编辑', value: ''
    },
    {
        name: 'description', label: '描述', value: ''
        , rules: [
            {required: true, message: '[描述]字段不允许为空 ', trigger: 'blur'},
            {min: 0, max: 128, message: '最多128字符', trigger: 'blur'}
        ]
    },
    {
        name: 'gmtCreate', label: '创建日期', value: ''
    },
    {
        name: 'gmtModified', label: '', value: ''
    }
]

</script>

<style scoped>
.role-icon {
    width: 156px;
    height: 156px;
    font-size: 108px;
    text-align: center;
    background-color: #FFFFFF;
    margin: 0 auto;
    border: 1px solid #777;
    color: rgba(0, 0, 0, 0.15);
}
</style>